{% extends 'base.html' %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'bootstrap/bootstrap.min.css' %}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css" />
<link rel="stylesheet" href="{% static 'bootstrap-icons-1.13.1/bootstrap-icons.css' %}">
<style>
  .tt-tree .tt-collapsed i.bi-chevron-right,
  .tt-tree .tt-expanded i.bi-chevron-down {
    cursor: pointer;
  }
  .table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  .btn-group .btn {
    transition: all 0.2s ease-in-out;
  }
  .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }
  .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
  }
  .btn-success {
    background-color: #198754;
    border-color: #198754;
  }
  .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
  }
  .btn-outline-danger:hover {
    background-color: #dc3545;
    color: white;
  }
</style>
{% endblock %}
{% block extra_js %}
<script src="{% static 'bootstrap/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'bootstrap/bootstrap.bundle.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
{% endblock %}

{% block title %}学科章节知识点管理{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <div class="d-flex justify-content-between align-items-center mb-6">
  <h1 class="text-2xl font-bold text-gray-800">学科章节知识点管理</h1>
</div>

    <!-- Subject Selection -->
    <div class="mb-6 bg-white p-4 rounded-lg shadow-sm border border-gray-100">
        <form method="get" action="{% url 'core:subject_chapter_knowledge' CURRENT_SUBJECT_ID %}">
            <div class="flex items-center">
                <label for="subject_id" class="mr-2 font-medium">选择学科:</label>
                <select id="subject_id" name="subject_id" class="form-select border-gray-300 rounded-lg px-3 py-2 mr-4 focus:border-primary focus:ring focus:ring-primary/20 transition duration-200" onchange="this.form.submit()">
                    <option value="">--请选择学科--</option>
                    {% for subject in subjects %}
                        <option value="{{ subject.id }}" {% if selected_subject and subject.id == selected_subject.id %}selected{% endif %}>
                            {{ subject.name }}
                        </option>
                    {% endfor %}
                </select>
               
            </div>
        </form>
    </div>

    {% if selected_subject %}
        <!-- 章节知识点树形表格 -->
        <div class="card rounded-xl overflow-hidden shadow-md border-0 mb-6">
            <div class="card-header bg-white border-bottom border-gray-100 px-4 py-3 d-flex justify-content-between align-items-center">
                <h5 class="h5 font-semibold text-gray-800 mb-0">章节知识点结构</h5>
                <div>
                    <button id="expand_all" class="btn btn-sm btn-outline-secondary rounded me-2 hover:bg-secondary/10 transition-colors">
                        <i class="bi bi-chevron-down"></i> 全部展开
                    </button>
                    <button id="collapse_all" class="btn btn-sm btn-outline-secondary rounded me-2 hover:bg-secondary/10 transition-colors">
                        <i class="bi bi-chevron-right"></i> 全部折叠
                    </button>

                    <a href="{% url 'core:chapter_create' %}?subject_id={{ selected_subject.id }}" class="btn btn-sm btn-outline-primary rounded me-2 hover:bg-primary/10 transition-colors">
                          <i class="bi bi-plus-circle"></i> 添加章节
                      </a>
                      <button id="export_all_word" class="btn btn-sm btn-info rounded ms-2 hover:bg-info/90 transition-colors">
                        <i class="bi bi-file-word"></i> 导出到Word
                    </button>
                </div>
            </div>
            <div class="card-body">
                {% if chapters %}
                <table id="knowledge_treetable" class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for chapter in chapters %}
                        <tr data-tt-id="chapter_{{ chapter.id }}" data-tt-parent-id="">
                            <td class="ps-3">
                                <i class="bi bi-book me-2"></i>{{ chapter.order }}. {{ chapter.name }}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm gap-1">
                                    <a href="{% url 'core:chapter_update' chapter.id %}" class="btn btn-outline-primary">编辑</a>
                                    <a href="{% url 'core:chapter_delete' chapter.id %}" class="btn btn-outline-danger">删除</a>
                                    <a href="{% url 'core:knowledge_point_create' %}?chapter_id={{ chapter.id }}" class="btn btn-success">添加知识点</a>
                                </div>
                            </td>
                        </tr>
                        {% for point in chapter.knowledge_points.all %}
                        <tr data-tt-id="knowledge_{{ point.id }}" data-tt-parent-id="chapter_{{ chapter.id }}">
                            <td class="ps-5">
                                <i class="bi bi-journal-text me-2"></i>{{ point.order }}. {{ point.name }}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'core:knowledge_point_update' point.id %}" class="btn btn-outline-primary">编辑</a>
                <a href="{% url 'core:mistake_create' %}?knowledge_point_id={{ point.id }}" class="btn btn-outline-success">添加错题</a>
                <a href="{% url 'core:knowledge_point_delete' point.id %}" class="btn btn-outline-danger">删除</a>
                                </div>
                            </td>
                        </tr>
                        {% for mistake in point.mistakes.all %}
                        <tr data-tt-id="mistake_{{ mistake.id }}" data-tt-parent-id="knowledge_{{ point.id }}">
                            <td class="ps-7 d-flex align-items-center">
                                <input type="checkbox" name="mistake_ids" value="{{ mistake.id }}" class="mistake-checkbox me-2" data-chapter-id="{{ chapter.id }}">
                                <div>
                                    <i class="bi bi-exclamation-circle me-2"></i>• {{ mistake.title }}
                                    <div class="d-inline-block ms-2">
                                        {% for i in "12345" %}
                                            {% if forloop.counter <= mistake.star_rating %}
                                                <i class="bi bi-star-fill text-warning"></i>
                                            {% else %}
                                                <i class="bi bi-star text-secondary"></i>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <span class="ms-2 text-danger">(引用: {{ mistake.citation_count }})</span>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'core:mistake_update' mistake.id %}" class="btn btn-sm btn-outline-secondary">编辑错题</a>
                                    <a href="{% url 'core:mistake_delete' mistake.id %}" class="btn btn-sm btn-outline-danger">删除错题</a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="alert alert-warning">
                    所选学科暂无章节，请先添加章节
                </div>
                {% endif %}
            </div>
        </div>

        <script>
// 全选/取消全选功能
$('#select_all_mistakes').click(function() {
    $('.mistake-checkbox').prop('checked', $(this).prop('checked'));
});

// 导出到Word功能
$('#export_all_word').click(function() {
    const selectedMistakes = [];
    // 收集所有选中的错题ID
    $('.mistake-checkbox:checked').each(function() {
        selectedMistakes.push($(this).val());
    });
    
    if (selectedMistakes.length === 0) {
        alert('请至少选择一个错题进行导出');
        return;
    }
    // 跳转到预览页面，传递选中的错题ID
    window.location.href = `{% url 'core:mistake_export_preview' %}?mistake_ids=${selectedMistakes.join(',')}`;
});

            $(document).ready(function() {
                // 初始化树形表格
                $('#knowledge_treetable').treetable({
                    clickableNodeNames: true,
                    expandable: true,
                    initialState: 'expanded',
                    indent: 10,
                    onNodeCollapse: function() {
                        $(this).find('.bi-chevron-down').removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    },
                    onNodeExpand: function() {
                        $(this).find('.bi-chevron-right').removeClass('bi-chevron-right').addClass('bi-chevron-down');
                    }
                });

                // 添加展开/折叠图标
                 $('#knowledge_treetable tbody tr').each(function() {
                     const node = $('#knowledge_treetable').treetable('node', $(this).data('tt-id'));
                     if (node && node.children.length > 0) {
                         const $icon = $('<i class="bi bi-chevron-down me-2"></i>');
                         $(this).find('td:first-child').prepend($icon);
                     }
                 });

                 // 全部展开/折叠功能
                 $('#expand_all').click(function() {
                     $('#knowledge_treetable').treetable('expandAll');
                     // 更新所有图标为展开状态
                     $('#knowledge_treetable tbody tr i.bi-chevron-right')
                         .removeClass('bi-chevron-right')
                         .addClass('bi-chevron-down');
                 });

                 $('#collapse_all').click(function() {
                     $('#knowledge_treetable').treetable('collapseAll');
                     // 更新所有图标为折叠状态
                     $('#knowledge_treetable tbody tr i.bi-chevron-down')
                         .removeClass('bi-chevron-down')
                         .addClass('bi-chevron-right');
                 });
            });
        </script>
    {% else %}
        <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center shadow-sm">
            <p class="text-gray-600">请从上方选择一个学科开始管理章节和知识点</p>
        </div>
    {% endif %}
</div>
{% endblock %}